import React from "react";
import { Box, Typography, Paper, Fade, Button, CircularProgress, IconButton } from "@mui/material";
import { AutoAwesome, Refresh } from "@mui/icons-material";

function ReportPage({ hasReport, report, isLoading, onGenerateReport }) {
  // 模拟AI报告内容
  const mockReport = "今天完成了主要任务，效率不错！建议明天继续保持。";

  return (
    <Box sx={{ p: 2, maxWidth: 400, mx: "auto" }}>
      {!hasReport ? (
        <Paper
          elevation={3}
          sx={{
            borderRadius: 3,
            p: 4,
            textAlign: "center",
            bgcolor: isLoading ? "action.disabledBackground" : "background.paper",
            cursor: isLoading ? "default" : "pointer",
            transition: "all 0.3s ease",
            "&:hover": isLoading ? {} : {
              transform: "translateY(-2px)",
              boxShadow: 6,
            },
          }}
          onClick={!isLoading ? onGenerateReport : undefined}
        >
          {isLoading ? (
            <>
              <CircularProgress size={64} sx={{ mb: 3, color: "primary.main" }} />
              <Typography variant="h5" sx={{ fontFamily: '"ZCOOL KuaiLe", cursive' }}>
                AI 生成中...
              </Typography>
            </>
          ) : (
            <>
              <AutoAwesome sx={{ fontSize: 64, color: "primary.main", mb: 3 }} />
              <Typography 
                variant="h4" 
                sx={{ 
                  fontFamily: '"ZCOOL KuaiLe", cursive',
                  fontSize: "2rem",
                  fontWeight: 600,
                  color: "primary.main",
                  mb: 2
                }}
              >
                生成今日总结
              </Typography>
              <Typography 
                variant="body1" 
                sx={{ 
                  color: "text.secondary",
                  fontSize: "1.1rem"
                }}
              >
                点击生成AI智能总结
              </Typography>
            </>
          )}
        </Paper>
      ) : (
        <Fade in={true} timeout={600}>
          <Paper
            elevation={2}
            sx={{
              borderRadius: 3,
              p: 4,
              bgcolor: "primary.light",
              color: "primary.contrastText",
              position: "relative",
            }}
          >
            {/* 重新生成按钮 */}
            <IconButton
              onClick={onGenerateReport}
              disabled={isLoading}
              sx={{
                position: "absolute",
                top: 8,
                right: 8,
                color: "primary.contrastText",
                "&:hover": {
                  bgcolor: "rgba(255, 255, 255, 0.1)",
                },
              }}
              title="重新生成"
            >
              {isLoading ? (
                <CircularProgress size={24} sx={{ color: "white" }} />
              ) : (
                <Refresh />
              )}
            </IconButton>

            <Typography
              variant="h5"
              sx={{
                fontFamily: '"ZCOOL KuaiLe", cursive',
                mb: 2,
                textAlign: "center",
                fontWeight: 600,
                pr: 4, // 给按钮留出空间
              }}
            >
              📊 今日总结
            </Typography>
            
            <Typography
              variant="body1"
              sx={{
                fontFamily: '"ZCOOL KuaiLe", cursive',
                fontSize: "1.3rem",
                lineHeight: 1.8,
                textAlign: "center",
                mb: 3,
              }}
            >
              {report || mockReport}
            </Typography>

            {/* 底部重新生成按钮 */}
            <Box sx={{ textAlign: "center", mt: 2 }}>
              <Button
                variant="outlined"
                size="small"
                onClick={onGenerateReport}
                disabled={isLoading}
                startIcon={isLoading ? <CircularProgress size={16} /> : <Refresh />}
                sx={{
                  fontFamily: '"ZCOOL KuaiLe", cursive',
                  color: "primary.contrastText",
                  borderColor: "rgba(255, 255, 255, 0.5)",
                  "&:hover": {
                    borderColor: "white",
                    bgcolor: "rgba(255, 255, 255, 0.1)",
                  },
                }}
              >
                {isLoading ? "生成中..." : "重新生成"}
              </Button>
            </Box>
          </Paper>
        </Fade>
      )}
    </Box>
  );
}

export default ReportPage;
